<template>
  <div id="main">
    <Theader title='喵喵电影'></Theader>
    <div id="content">
      <div class="movie_menu">
				<router-link tag="div" class="city_name" to="/movie/city">
					<span>{{$store.state.city.nm}}</span><i class="iconfont icon-lower-triangle"></i>
				</router-link>
				<div class="hot_swtich">
					<router-link tag="div" to="/movie/nowplaying" class="hot_item" >正在热映</router-link>
					<router-link tag="div" to="/movie/comingsoon" class="hot_item active">即将上映</router-link>
				</div>
				<router-link tag="div" to="/movie/search" class="search_entry">
					<i class="iconfont icon-sousuo"></i>
				</router-link>
			</div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <Tfooter></Tfooter>
    <router-view name="detail"></router-view>
  </div>
</template>

<script>
import Theader from '@/components/Theader'
import Tfooter from '@/components/Tfooter'
export default {
    name:"Movie",
    components:{
      Theader,
      Tfooter
    },
    mounted(){
      // 定位的位置跟切换的位置不一致时的弹窗
      setTimeout(async ()=>{
        let res = await this.$axios.get('/api/citylocal')
        // console.log(res);
        let nm = res.data.nm;
        let id = res.data.id;
        if(nm!=this.$store.state.city.nm){
          this.$dialog.confirm({
            title: '提示',
            message: '您当前所在位置 深圳，是否切换城市',
          })
            .then(() => {
              // on confirm
              // 把你点击切换的城市的信息存储到本低存储
              window.localStorage.setItem('nm',nm)
              window.localStorage.setItem('id',id)
              // 本地存储修改的时候，页面不会响应式的刷新，手动重新加载
              window.location.reload()
            })
            .catch(() => {
              // on cancel
             
            });
        }
      },3000)
    }
}
</script>

<style scoped>
#content{ flex:1; overflow:auto; margin-bottom: 50px; position: relative; display: flex; flex-direction:column;}
#content .movie_menu{ width: 100%; height: 45px; border-bottom:1px solid #e6e6e6; display: flex; justify-content:space-between; align-items:center; background:white; z-index:10;}
.movie_menu .city_name{ margin-left: 20px; height:100%; line-height: 45px;}
/* .movie_menu .city_name.active{ color: #ef4238; border-bottom: 2px #ef4238 solid;} */
.movie_menu .city_name.router-link-active{ color: #ef4238; border-bottom: 2px #ef4238 solid;}
.movie_menu .hot_swtich{ display: flex; height:100%; line-height: 45px;}
.movie_menu .hot_item{ font-size: 15px; color:#666; width:80px; text-align:center; margin:0 12px; font-weight:700;}
/* .movie_menu .hot_item.active{ color: #ef4238; border-bottom: 2px #ef4238 solid;} */
.movie_menu .hot_item.router-link-active{ color: #ef4238; border-bottom: 2px #ef4238 solid;}
.movie_menu .search_entry{ margin-right:20px; height:100%; line-height: 45px;}
/* .movie_menu .search_entry.active{ color: #ef4238; border-bottom: 2px #ef4238 solid;} */
.movie_menu .search_entry.router-link-active{ color: #ef4238; border-bottom: 2px #ef4238 solid;}
.movie_menu .search_entry i{  font-size:24px; color:red;}
</style>